<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Full Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="background:#555555;padding:10px">水滴鱼门窗计算器</div>
<div data-options="region:'west',split:true,title:'菜单栏',collapsed:true" style="width:150px;padding:10px;">west content
</div>
<div data-options="region:'center',title:'主页面'">
    <table id="dg" class="easyui-datagrid"
           data-options="rownumbers:true,singleSelect:true,url:'/financial_calculator/list',method:'get',toolbar:toolbar,
onClickCell: onClickCell,onEndEdit: onEndEdit, showFooter: true,onLoadSuccess: onLoadSuccess">
        <thead>
        <tr>
            <th data-options="field:'id', align:'right', width:80, hidden: true">
                id
            </th>
            <th data-options="field:'days', align:'right', width:100, editor:{type:'datebox'}, formatter: function(data){if (data) {return data.substring(0, 10);}else {return '';}}">
                年月
            </th>
            <th data-options="field:'salary', align:'right', width:80, editor:{type:'numberbox',options:{precision:2}}">
                薪资
            </th>
            <th data-options="field:'housingLoan', align:'center', width:80, editor:{type:'numberbox',options:{precision:2}}">
                房贷
            </th>
            <th data-options="field:'creditCard', align:'center', width:80, editor:{type:'numberbox',options:{precision:2}}">
                信用卡
            </th>
            <th data-options="field:'otherCost', align:'center', width:80, editor:{type:'numberbox',options:{precision:2}}">
                其他花费
            </th>
            <th data-options="field:'cash', align:'center', width:80, editor:{type:'numberbox',options:{precision:2}}">
                现金
            </th>
            <th data-options="field:'insurance', align:'center', width:80, editor:{type:'numberbox',options:{precision:2}}">
                保险
            </th>
            <th data-options="field:'shares', align:'center', width:80, editor:{type:'numberbox',options:{precision:2}}">
                股票
            </th>
            <th data-options="field:'highRisk', align:'center', width:80, editor:{type:'numberbox',options:{precision:2}}">
                高风险投资
            </th>
        </tr>
        </thead>
    </table>
    <a id="exportExcelBtn" style="display: none;" href="/win_calculator/order/exportExcel"></a>
    <script type="text/javascript">
        var toolbar = [{
            text: '新增行',
            iconCls: 'icon-add',
            handler: function () {
                append();
            }
        }, {
            text: '删除行',
            iconCls: 'icon-remove',
            handler: function () {
                if (editIndex == undefined) {
                    return
                }
                layer.confirm('确定删除?', function (index) {
                    //do something
                    var id = $('#dg').datagrid('getRows')[editIndex]['id'];
                    if (id) {
                        $.post('/financial_calculator/deleteById/' + id);
                    }
                    $('#dg').datagrid('cancelEdit', editIndex)
                        .datagrid('deleteRow', editIndex);
                    editIndex = undefined;
                    layer.close(index);
                });

            }
        }, '-', {
            text: '计算',
            iconCls: 'icon-sum',
            handler: function () {
                if (endEditing()) {
                    var index = $('#dg').datagrid('getRowIndex', $("#dg").datagrid('getSelected'));
                    $.post('/financial_calculator/recount', JSON.stringify($('#dg').datagrid('getSelected')), function (result) {
                        if (result.statu) {
                            $('#dg').datagrid('updateRow', {
                                index: index,
                                row: result.data
                            });
                        }
                    }, 'json');
                }
            }
        }, {
            text: '保存',
            iconCls: 'icon-save',
            handler: function () {
                if (endEditing()) {
                    $.post('/financial_calculator/doSave', JSON.stringify($('#dg').datagrid('getSelected')), function (result) {
                        if (result.statu) {
                            $('#dg').datagrid('loadData', result.data);
                        }
                    }, 'json');
                }
            }
        }];

        var editIndex = undefined;

        function endEditing() {
            if (editIndex == undefined) {
                return true
            }
            if ($('#dg').datagrid('validateRow', editIndex)) {
                $('#dg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }

        function onClickCell(index, field) {
            if (editIndex != index) {
                if (endEditing()) {
                    $('#dg').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                    var ed = $('#dg').datagrid('getEditor', {index: index, field: field});
                    if (ed) {
                        ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                    }
                    editIndex = index;
                } else {
                    setTimeout(function () {
                        $('#dg').datagrid('selectRow', editIndex);
                    }, 0);
                }
            }
        }

        function onEndEdit(index, row) {
            //row.productname = $(ed.target).combobox('getText');
        }

        function append() {
            if (endEditing()) {
                $('#dg').datagrid('appendRow', {});
                editIndex = $('#dg').datagrid('getRows').length - 1;
                $('#dg').datagrid('selectRow', editIndex)
                    .datagrid('beginEdit', editIndex);
            }
        }

        function removeit() {
            if (editIndex == undefined) {
                return
            }
            $('#dg').datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
            editIndex = undefined;
        }

        function accept() {
            if (endEditing()) {
                $('#dg').datagrid('acceptChanges');
            }
        }

        function reject() {
            $('#dg').datagrid('rejectChanges');
            editIndex = undefined;
        }

        function getChanges() {
            var rows = $('#dg').datagrid('getChanges');
            alert(rows.length + ' rows are changed!');
        }

        function onLoadSuccess(data) {
            var merges = [{
                index: 2,
                colspan: 2
            }];
            for (var i = 0; i < merges.length; i++) {
                $(this).datagrid('mergeCells', {
                    index: -1,
                    field: 'openNum',
                    colspan: merges[i].colspan
                });
            }
        }

        function myformatter(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            return y + '-' + (m < 10 ? ('0' + m) : m);
        }

        function myparser(s) {
            if (!s) return new Date();
            var ss = (s.split('-'));
            var y = parseInt(ss[0], 10);
            var m = parseInt(ss[1], 10);
            var d = parseInt(ss[2], 10);
            if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
                return new Date(y, m - 1, d);
            } else {
                return new Date();
            }
        }
    </script>
</div>
</body>
</html>